﻿/**
 * Created by wzj on 2017/3/20.
 */

//
class RTable extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.products = [];
		this.state = {
			datas:[],
			totalSize: 0,
			sizePerPage: 5,
			page: 1
		}


		//数据行选中配置
		this.selectRowProp  = {
			mode: 'radio',
			onSelect: this.onRowSelect,
			onSelectAll: this.onSelectAll
		}

		this.ajaxRequestData = this.ajaxRequestData.bind(this);
		this.handlePageChange = this.handlePageChange.bind(this);
		this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);

	}
	/*******************************************************************/
	//DOM加载完成
	componentDidMount(){
		//请求第1页数据，且每页显示5条
		this.ajaxRequestData();
	}
	/*******************************************************************/

	ajaxRequestData(page = this.state.page, sizePerPage = this.state.sizePerPage) {
		//alert("请求第" + page + "页数据，每页显示" + sizePerPage);

		const currentIndex = (page - 1) * sizePerPage;

		$.ajax({
			url:"accountList",
			data:{
				page:page-1,
				sizePerPage:sizePerPage
			},
			success:function(str,msg,response){
				if(response.statusText=="success"){
					var result = JSON.parse(response.responseText);
					this.setState({
						datas: result.content,
						totalSize: result.totalElements,
						page:result.number+1,
						sizePerPage:result.size
					});

				}
			}.bind(this),
			error:function(str,msg,response){
			}.bind(this)
		});

	}
	/*******************************************************************/

	//分页数量选项事件
	handleSizePerPageChange(sizePerPage){
		this.ajaxRequestData(1, sizePerPage);
	}

	//分页事件
	handlePageChange(page, sizePerPage){
		this.ajaxRequestData(page,sizePerPage);
	}

	/*******************************************************************/
	//选中行
	onRowSelect = (row, isSelected) =>{
		var rowArr = [];
		if(isSelected) {
			rowArr.push(row.id);
		}
	}
	onSelectAll = (isSelected, currentDisplayAndSelectedData) =>{

	}

	/*******************************************************************/
	//外部模态窗体表单保存
	externalModalOnSave	= (object) =>{
		alert("添加"+object)
		
		
	}
	//自定义添加按钮点击事件
	handleInsertButtonClick = (onClick) => {
		//console.log(onClick,this);
		showExternalModalForm();
		//onClick(); //弹出自带模态窗体
	}
	//自定义添加按钮
	createCustomInsertButton =(onClick) =>{
		return (
			<button className="btn btn-primary" onClick={ () => this.handleInsertButtonClick(onClick) }>+添加</button>
			//<button className="btn btn-primary" onClick={ openModal }>+添加</button>
		);
	}

	//自定义删除按钮点击事件
	handleDeleteButtonClick = (onClick) => {
		alert("删除id:"+this.state.selectRows)
	}
	//自定义删除按钮
	createCustomDeleteButton = (onClick) => {
		return (
			<button className="btn btn-danger" onClick={ e => this.handleDeleteButtonClick(onClick) }>-删除</button>
			//<button className="btn btn-danger" onClick={ onBtnClick }>-删除</button>
		);
	}
	/*******************************************************************/
	//过滤按钮事件
	handleBtnClick = (evt) =>{
		var value = evt.target.innerHTML;
	//	this.refs.filterName.applyFilter(value);
		alert("过滤Name:"+value)
	}

	//过滤下拉框事件
	handleSelectChange = (evt) =>{
		var value = evt.target.options[evt.target.options.selectedIndex].value;
		//this.refs.filterName.applyFilter(value);

		alert("过滤Name:"+value)
	}

	/*******************************************************************/
	render() {

	//配置
	const tableOptions = {
		noDataText: '暂无可用数据',

		page: this.state.page,		//当前第几页
		sizePerPage: this.state.sizePerPage,	//每页显示几条
		onPageChange: this.handlePageChange,  //分页事件
		onSizePerPageList: this.handleSizePerPageChange, //分页下拉事件

		sizePerPageList: [
			{text: '5', value: 5},
			{text: '10', value: 10 },
			{text:'所有', value:this.products.length}
		],				//分页数量选项
		sizePerPage: this.state.sizePerPage,	//每页显示条数
		pageStartIndex: this.state.currentPage, //	分页开始索引
		paginationSize: 3,	//分页数字按钮个数
		prePage: '上一页',
		nextPage: '下一页',
		firstPage: '首页',
		lastPage: '尾页'
		,insertBtn: this.createCustomInsertButton		//自定义添加按钮
		,deleteBtn: this.createCustomDeleteButton		//自定义删除按钮
		,insertModalBody: this.createCustomModalBody	//自定义模态窗窗体
		,insertModalHeader: this.createCustomModalHeader	//自定义模态窗标题
		,onAddRow: this.onAddNewRow	//远程添加新数据
		,onDeleteRow: this.onDeleteRow	//远程删除数据
	}

		return (
			<div>
				<p>
					过滤条件:
					<button onClick={ this.handleBtnClick } className='btn btn-default'>1</button>
					<button onClick={ this.handleBtnClick } className='btn btn-default'>2</button>
					<select onChange={ this.handleSelectChange  }>
						<option value="">所有</option>
						<option value="1">1</option>
						<option value="2">2</option>
					</select>
				</p>
				<BootstrapTable data={ this.state.datas }
								remote={true}
								striped hover

								fetchInfo={ { dataTotalSize: this.state.totalSize } }

								options={ tableOptions }
								pagination={ true }
								insertRow={true}
								deleteRow={ true }
								selectRow={ this.selectRowProp }
								>
				<TableHeaderColumn dataField='custAcctId' >子账号</TableHeaderColumn>
				<TableHeaderColumn dataField='thirdCustId' >会员账号</TableHeaderColumn>
				<TableHeaderColumn dataField='custName' >账号名称 </TableHeaderColumn>
				<TableHeaderColumn dataField='totalAmount' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>总金额 </TableHeaderColumn>
				<TableHeaderColumn dataField='totalBalance' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>可用余额 </TableHeaderColumn>
				<TableHeaderColumn dataField='totalFreezeAmount' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>冻结 </TableHeaderColumn>
				<TableHeaderColumn dataField='id' isKey={ true }  dataFormat={customFormatterOperation}>操作 </TableHeaderColumn>
				</BootstrapTable>
			</div>
		);
	}
}
var myRTable = ReactDOM.render(<RTable url="" />,document.getElementById("component-table"));



function customFormatterOperation(cell,row){
	//console.log(cell,row);
	var list = "<a href='javascript:chgList(\""+row.custAcctId+"\")'>流水</a>";
	var sync = "<a href='javascript:sync(\""+row.custAcctId+"\")'>同步</a>";
	var freezeAmount = "<a href='javascript:showFreezeForm(\""+row.custAcctId+"\")'>冻结/解冻</a>";
	var handFee = "<a href='javascript:handFee(\""+row.custAcctId+"\")'>收退费</a>";
	var sett = "<a href='javascript:sett(\""+row.custAcctId+"\")'>清收</a>";
	var inmoney = "<a href='javascript:inMoney(\""+row.custAcctId+"\")'>入金</a>";
	var outmoney = "<a href='javascript:outMoney(\""+row.custAcctId+"\")'>出金</a>";
	return list +" "+ sync+" "+freezeAmount +"<br>  " + handFee + "  " + sett + "  " + inmoney+ "  " +outmoney;
}



//自定义格式化表格内容
function customFormatterPrice(cell,row){
	return "$ "+cell;
}
//保存表单数据
function save_newItem(){
	//调用组件内保存方法并发送ajax请求
	myRTable.externalModalOnSave($("#item-form").serialize());
}

function showExternalModalForm(){
	
}

//账户流水信息
function chgList(custAcctId){
//	window.open("chgList?custAcctId="+custAcctId);
//	window.open("","chgListWin");
	$("#data-form").attr("action","chgList");
	$("#data-form").attr("target","_blank");
	$("#custAcctId").val(custAcctId);
	$("#data-form").submit();
}

//同步资金账户信息
function sync(custAcctId){
	var callback=function(result){
		//alert(arguments[0].rspMsg);
		if (result.success){
			myRTable.ajaxRequestData();
		}else{
			alert(result.rspMsg);
		}
	}
	$("#custAcctId").val(custAcctId);
	$.post("sync",$("#data-form").serialize(),callback,"json");
}

//冻结与解冻
function showFreezeForm(){
	$.ajax({
		url:"freeze?custAcctId="+arguments[0],
		dataType:"html",
		success: function(content){
			$("#formAgent").html(content);
		    $("#modal-itemForm").modal("show");
		   }
	});
}

//平台收费退费
function handFee(){
	$.ajax({
		url:"platCharge?custAcctId="+arguments[0],
		dataType:"html",
		success: function(content){
			$("#formAgent").html(content);
		    $("#modal-itemForm").modal("show");
		   }
	});
}


//平台支付与收取
function sett(){
	$.ajax({
		url:"platSett?custAcctId="+arguments[0],
		dataType:"html",
		success: function(content){
			$("#formAgent").html(content);
		    $("#modal-itemForm").modal("show");
		   }
	});
}

//入金
function inMoney(){
	$.ajax({
		url:"inMoney?custAcctId="+arguments[0],
		dataType:"html",
		success: function(content){
			$("#formAgent").html(content);
		    $("#modal-itemForm").modal("show");
		   }
	});
}

//出金
function outMoney(){
	$.ajax({
		url:"outMoney?custAcctId="+arguments[0],
		dataType:"html",
		success: function(content){
			$("#formAgent").html(content);
		    $("#modal-itemForm").modal("show");
		   }
	});
}